<template>
  <el-dialog width="400px" :visible="value" class="import-dialog" @close="close">
    <div class="xx">
      <i class="el-icon-upload" />
      <el-button type="text" @click="downloadEmployee">下载导入模版 </el-button>
      <el-button type="text" @click="$refs.file.click()">上传文件</el-button>
      <input ref="file" style="display: none" type="file" accept=".xlsx" @change="uploadEmployee">
    </div>
    <template #footer>
      <el-button type="primary" @click="close">取 消</el-button>
    </template>

  </el-dialog>
</template>

<script>
import { downloadEmployeeApi, uploadEmployeeApi } from '@/api/employee'
import fileSaver from 'file-saver'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  methods: {
    // 关闭对话框
    close() {
      this.$emit('input', false)
    },
    // 下载模版
    async downloadEmployee() {
      const res = await downloadEmployeeApi()
      fileSaver.saveAs(res, '员工信息表.xlsx')
    },
    // 上传模版
    async  uploadEmployee(e) {
      try {
        //   console.log(e)
        console.log(e.target.files[0])
        await uploadEmployeeApi(e.target.files[0])
        this.$message.success('上传成功')
        // 关闭对话框
        this.close()
        // 重新获取数据
        this.$emit('refrence')
      } catch {
        this.$message.error('上传失败')
      } finally {
      // 清空内容
        this.$refs.file.value = ''
      }
    }
  }

}
</script>

<style scoped lang="scss">
.xx{
    width: 250px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    border: 1px dashed #ccc;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
</style>
